<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:a4j="http://richfaces.org/a4j" 
      xmlns:rich="http://richfaces.org/rich"> 

<h:head></h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
        Write your own custom rich components with built-in AJAX support${cursor}
        </f:facet>
		<h:outputText value="Panel Body" /> 
	</rich:panel>	
	
	
	
	
		<h:form id="myform">
			<rich:toolbar>
					<rich:dropDownMenu mode="ajax" label ="File">
							<rich:menuItem label="New" />
							<rich:menuItem label="Open File..." />
							<rich:menuItem label="Close" />
							<rich:menuItem label="Close All" />
					</rich:dropDownMenu>
					
					<rich:dropDownMenu mode="ajax" >
							<f:facet name="label">
							<h:outputText value="View" />
							</f:facet>
							<rich:menuItem label="Undo" />
					</rich:dropDownMenu>
					<rich:dropDownMenu mode="ajax" >
							<f:facet name="label">
							<h:outputText value="Company" />
							</f:facet>
							<rich:menuItem label="About" />
					</rich:dropDownMenu>
					<rich:dropDownMenu mode="ajax" >
							<f:facet name="label">
							<h:outputText value="Stocks" />
							</f:facet>
							<rich:menuItem label="About" />
					</rich:dropDownMenu>
					
					<rich:dropDownMenu mode="ajax" >
							<f:facet name="label">
							<h:outputText value="Help" />
							</f:facet>
							<rich:menuItem label="About" />
					</rich:dropDownMenu>
			</rich:toolbar>
		


	<rich:panel>
		<rich:toolbar itemSeparator="line" height="70x">
				
	            <h:graphicImage title="#{msgs.v1}" value="/resources/images/credit_cards_512.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage title="#{msgs.v2}"  value="/resources/images/checkout.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage title="#{msgs.v3}"  value="/resources/images/credit_cards_512.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/credit_cards_512.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/coins.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/credit_cards_512.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/credit_card.png" width="35" height="50" style=" height : 50px;"/>

				<h:graphicImage value="/resources/images/credit_cards_512.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/banknote.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/discount.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/credit_cards_512.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/personal_loan.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/full_shopping_cart_512.png" width="35" height="50" style=" height : 50px;"/>
				<h:graphicImage value="/resources/images/credit_cards_512.png" width="35" height="50" style=" height : 50px;"/>
				
					
		</rich:toolbar>
	</rich:panel>


    <rich:panel>
           		<rich:panel >
				       <f:facet name="header">
				             #{msgs.salesapp}
				       </f:facet> 
				       
				       
		<h:panelGrid columns="4">
				
								       
	<h:inputText label="hhhhhhhhh" ></h:inputText>	<h:outputLabel value="labeleee" />		       
<rich:select value="ttttt"> </rich:select>

				       
	<h:inputText > ffff</h:inputText>			       
<rich:select value="ttttt"> </rich:select>

				       
	<h:inputText > ffff</h:inputText>			       
<rich:select value="ttttt"> </rich:select>

				       
	<h:inputText > ffff</h:inputText>			       
<rich:select value="ttttt"> </rich:select>
       	   
 </h:panelGrid>
		
		
		<script type="text/javascript">
            function customFilterFunction(subString, value) {
                if (subString.length > 1)
                    if (value.indexOf(subString) != -1) return true;
            }
        </script>
        
        	
			<rich:autocomplete popupClass="myPopupClass" autofill="false" id="myAutocomplete"
		                     clientFilterFunction="customFilterFunction" mode="ajax" minChars="1"
		                     autocompleteMethod="#{autoCompleteBean.autocomplete}" var="country" fetchValue="#{country.name}"
		                     showButton="true" value="#{autoCompleteBean.value}" layout="list"
		                     onchange="return onEvent.call(this, event);" onselectitem="return onEvent.call(this, event);"
		                     onblur="return onEvent.call(this, event);" onfocus="return onEvent.call(this, event);">
			 
			 <a4j:ajax event="change" render="" />
			         </rich:autocomplete>
			
			
	
				       


				<rich:panel header="Sale Lines">
							<rich:dataTable value="" var="" rows="10" >
							
										<rich:column>
												<f:facet name="header">Product Code</f:facet>
												<h:outputText value="ss" />
												<h:outputText value="dd" />
										</rich:column>
										
										<rich:column>
												<f:facet name="header">Proposed Price</f:facet>
												<h:inputText value="" size="7">
												<a4j:ajax event="valueChange" render="reason, margin" />
												</h:inputText>
										</rich:column>
										
										<rich:column>
												<f:facet name="header">Sales Cost</f:facet>
												<h:outputText value="544444" />
										</rich:column>
										
										<rich:column>
												<f:facet name="header">Reason</f:facet>
												<h:selectOneMenu id="reason" required="true" value="">
												     
												</h:selectOneMenu>
										</rich:column>
										
										<rich:column>
												<f:facet name="header">Proposed Gross Margin</f:facet>
												<h:outputText id="margin" value="">
												<f:convertNumber pattern="" />
												</h:outputText>
										</rich:column>
							
							</rich:dataTable>
				</rich:panel>
				



				
		<a4j:commandButton value="إلغاء"/>
			<a4j:commandButton value="حفظ و جديد"/>
			<a4j:commandButton value="حفظ و إغلاق"/>
				<a4j:commandButton value="حفظ و طباعة"/>

					
					 
				</rich:panel>
				
				<br/>
				<br/>
				
								
				<rich:panel style="width:650px" header="rich:dataGrid sample">
					<rich:dataGrid value="" var="" columns="3" >
					

        
         <f:facet name="header">
            <h:outputText value="Car Store"></h:outputText>
            <h:outputText value="Car Store"></h:outputText>
            <h:outputText value="Car Store"></h:outputText>
        </f:facet>
   
        
									<h:inputText value="inputText" />
									<b><h:outputText value="outputText"/></b>
									<i>EEEEEEE</i>
						
						
					</rich:dataGrid>
					
									<rich:dataGrid value="" var="" columns="3">
					
						
									<h:inputText value="inputText" />
									<b><h:outputText value="outputText"/></b>
									<i>EEEEEEE</i>
						
						
					</rich:dataGrid>
					
									<rich:dataGrid value="" var="" columns="3">
					
						
									<h:inputText value="inputText" />
									<b><h:outputText value="outputText"/></b>
									<i>EEEEEEE</i>
						
						
					</rich:dataGrid>
					
									<rich:dataGrid value="" var="" columns="3">
					
						
									<h:inputText value="inputText" />
									<b><h:outputText value="outputText"/></b>
									<i>EEEEEEE</i>
						
						
					</rich:dataGrid>
				</rich:panel>
				
			<br/>
			<br/>
			<br/>	
				
    </rich:panel>
			
			</h:form>	
			
			
			
</body> 
</html>
